@import '../../../../style/color.scss';
@import '../../../../style/font.scss';

.map-container{
  width:100%;
  padding: 10px 30px;

  .main-map{
    border: 1px solid $page-border-color;
    background: #FFF;
    border-radius: 25px;
    padding-bottom: 20px;

    .map-header{

      .map-title{
        float: left;
        font-family: $DFYuanW7-GBK;
        font-size: $h3-font-size;
        color: $form-font-color;
        padding: 30px 0 30px 30px;
      }

      .header-right{
        float:right;
        margin:15px 20px 0 0;

        .ant-input-search > input {
          font-size: 16px;
        }

        .map-search{
          width: 200px;

          .ant-input {
            border-radius: 4px;

            &:hover, &:focus, &:active {
              border-color: $btn-border-color;
              box-shadow: none;
            }
          }
        }
        .select{
          float:left;
          width: 200px;

          &:not(:last-child) {
            margin-right: 20px;
          }
        }
      }
      .ant-select-selection-selected-value{
        font-family: $DFYuanW7-GBK;
        font-size: 16px;
        color: $form-font-color;
        letter-spacing: 0;
        line-height:34px;

      }
      .ant-select{

        .ant-select-selection{
          &:hover,&:focus{
            border-color:$btn-border-color;
            box-shadow: none;
          }
        }
      }
      .ant-select-selection--single,.ant-select-selection__rendered{
        height:34px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

        .ant-select-arrow {
          top: 35%;
        }
      }
      .ant-select-selection__placeholder{
        font-size: 16px;
      }

    }

    .map-header:after{
      display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
    }

    .map{
      background: #FFF;
      height: 430px;
      padding: 15px 20px 0;

      #mapDiv{
        position: absolute;
        width: 1062px;
        height:415px;
        z-index: 0;
        border:solid 1px #CCCCCC;

        .tdt-infowindow-tip-container{

          display: none;

        }
        .tdt-infowindow-content-wrapper{

          width: 280px;
          height: 160px;
          background: #FFFFFF;
          border: 1px solid #CCCCCC;
          border-radius: 6px;

          .tdt-infowindow-content{

            margin: 0;

            .win-hotel {
              width: 36px;
              height: 36px;
            }

            ul{

              width: 280px;
              height: 100%;

              li{
                width: 100%;
                height: 100%;
                font-family: $DFYuanW7-GBK;
                font-size: 14px;
                color: $font-b-black;
                letter-spacing: 0px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 5px 10px 0 10px;

                &:first-child{

                  >div{

                    >img{
                      margin-right:10px;
                    }

                    >div{
                      display: inline-block;
                      width: 75%;
                      font-family: $DFYuanW7-GBK;
                      font-size: 16px;
                      color: $font-b-black;
                      letter-spacing: 0;
                      padding: 10px 0 10px 0;
                      vertical-align: top;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                  }
                }
                .normal{
                  color: #1480FF;
                }

                .level1 {
                  color: #FFE218;
                }

                .level2 {
                  color: #FF5400;
                }

                .level3 {
                  color: #FF0000;
                }
              }
              li:after{

                display: block;
                content: '';
                clear: both;
                visibility: hidden;
                height: 0;

              }
            }
          }
        }
      }
      .tdt-touch .tdt-bar a{
        width: 36px;
        height: 36px;
        line-height: 36px;
      }
    }
  }

  .video_kitchen {
    cursor: pointer;
    width: 20px;
    height: 26px;
  }
}
.map-container .main-map .map #mapContent .tdt-infowindow-content-wrapper{
  box-shadow: 0 0 4px 0 rgba(0,0,0,0.50);
}


.v-map-container{
  width:100%;
  padding: 25px 15px 0;

  .ant-select-arrow {
    top:35%;
  }

  .main-map{
    border: 1px solid $page-border-color;
    border-radius: 25px;
    background: #FFF;

    .map-header{
      margin-bottom: 15px;

      .map-title{
        float: left;
        font-family: $DFYuanW7-GBK;
        font-size: $h3-font-size;
        color: $form-font-color;
        padding: 30px 0 30px 30px;
      }

      .header-right{
      //  float:right;
        //text-align: right;
       // margin:15px 24px 0 0;
        vertical-align: middle;
        padding: 20px 20px 0;

        .map-search{
         // margin:0 0 0 10px;
          width: 200px;
          vertical-align: middle;

          .ant-input {
            color: #292929;
            border-radius: 4px;

            &:hover, &:focus, &:active {
              border-color: $btn-border-color;
              box-shadow: none;
            }
          }
        }
        .select{
        //  float:left;
          margin-right: 10px;
          width: 200px;
          vertical-align: middle;
        }
      }
      .ant-select-selection-selected-value{

        font-family: $DFYuanW7-GBK;
        font-size: 20px;
        color: $form-font-color;
        letter-spacing: 0;
        line-height:30px;

      }
      .ant-select{

        width:280px;
        .ant-select-selection{
          &:hover,&:focus{
            border-color:$btn-border-color;
            box-shadow: none;
          }
        }
      }
      .ant-select-selection--single,.ant-select-selection__rendered{

        height:34px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }
      .ant-select-selection__placeholder{
        font-size: 18px;
        height: 50px;
      }

    }
    .map-header:after{

      display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
    }
    .map{
      background: #FFF;
      height: 1197px;
      padding: 0 20px 20px;
      position: relative;
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;

      #mapDiv{
        position: absolute;
        left: 20px;
        right: 20px;
        height:1177px;
        z-index: 0;

        .tdt-infowindow-tip-container{

          display: none;

        }
        .tdt-infowindow-content-wrapper{

          width: 280px;
          height: 210px;
          background: #FFFFFF;
          border: 1px solid #CCCCCC;
          border-radius: 6px;

          .tdt-infowindow-content{

            margin: 0;

            .win-hotel {
              width: 40px;
              height: 40px;
            }

            ul{

              width: 280px;
              height: 100%;

              li{
                width: 100%;
                height: 100%;
                font-family: $DFYuanW7-GBK;
                font-size: 16px;
                color: $font-b-black;
                letter-spacing: 0px;
                padding: 8px 10px 0 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:first-child{
                  margin-top:10px;

                  >div{

                    >img{
                      margin-right:10px;
                    }

                    >div{
                      display: inline-block;
                      width: 75%;
                      font-family: $DFYuanW7-GBK;
                      font-size: 18px;
                      color: $font-b-black;
                      letter-spacing: 0;
                      padding: 10px 0 10px 0;
                      vertical-align: top;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                  }
                }
                .normal{
                  color: #1480FF;
                }

                .level1 {
                  color: #FFE218;
                }

                .level2 {
                  color: #FF5400;
                }

                .level3 {
                  color: #FF0000;
                }
              }
              li:after{

                display: block;
                content: '';
                clear: both;
                visibility: hidden;
                height: 0;

              }
            }
          }
        }
      }
      .tdt-touch .tdt-bar a{

        width: 50px;
        height: 50px;
        line-height: 50px;
      }
    }
  }

  .video_kitchen {
    cursor: pointer;
    width: 24px;
    height: 30px;
  }
}
